import React, { useState, useEffect, useMemo, useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import { Cell, Image, Toast, Empty, Badge } from 'react-vant'
import '../css3/Message.scss'
import 'animate.css';
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000'

function Message() {
    const navigate = useNavigate()
    const [friends, setFriend] = useState([])
    const user = JSON.parse(sessionStorage.getItem('user'))


    const getFriend = async () => {
        const { data: { code, friendList } } = await axios.post('/friends', { friendId: user.friendId })
        console.log(friendList);
        code === 200 ? setFriend(friendList) : Toast.fail('获取失败')
    }
    useEffect(() => {
        getFriend()
    }, [])

    return (
        <div className='message animate__animated animate__wobble'>
            <h2>消息</h2>
            <div id="list">
                {
                    friends.length ? friends.filter(item => item._id !== user._id).map(item => (
                        <Cell
                            onClick={() => {
                                navigate('/dialogue')
                                sessionStorage.setItem('friend', JSON.stringify(item))
                            }}
                            center
                            key={item._id}
                            title={item.username}
                            icon={
                                <Image round width={50} height={50} src={item.picture} />
                            }
                        />
                    )) : <Empty description="暂无聊天信息，快去聊天吧！" />
                }
            </div>
        </div>
    )
}

export default Message